const path = require('path') // 处理绝对路径
const { DefinePlugin } = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/** 输出文件路径 */
const OUTPUT_PATH = 'dist';
module.exports = {
    // production 或 development
    mode: 'production',
    // 入口文件
    entry: process.env.NODE_ENV==='production'?path.resolve(__dirname, 'src/main.js'):path.resolve(__dirname, 'src/dev.js'),
    output: {
        //打包后的文件存放的地方
        path: path.resolve(__dirname, OUTPUT_PATH),
        //打包后输出文件的文件名
        filename: 'cat2doc.js',
        // 自动将上次打包目录资源清空
        clean: true,
        publicPath: "/"
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.js', '.json', '.ts'],
    },
    devServer: {
        // 开启服务器时，浏览器自动打开页面
        open: true,
        // 设置端口号为8088
        port: '3333',
        // 启动gzip压缩
        compress: false,
        // 开启热模块替换
        hot: true,
    },
    plugins: [
        new DefinePlugin({
            'process.env': JSON.stringify(process.env)
        }),
        new BundleAnalyzerPlugin({
            openAnalyzer: false
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'README.md', to: '' }
            ]
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            {
                filename: 'index.html',
                template: 'src/assets/index.html',
                inject: true,
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                }
            }
        ),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "cat2doc.css",
        }),
    ],
    module: {
        rules: [{
                test: /\.svg/,
                type: 'asset/inline',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                // loader执行顺序是从右到左
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            },
            {
                test: /\.styl$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 1024 * 1024, // 小于10kb的图片会被base64处理
                    },
                },
            },
        ]
    },
    optimization: {
        minimize: true, // 可省略，默认最优配置：生产环境，压缩 true。开发环境，不压缩 false
        minimizer: [
            new TerserPlugin({
                parallel: true, // 可省略，默认开启并行
                terserOptions: {
                    toplevel: true, // 最高级别，删除无用代码
                    ie8: true,
                    safari10: true,
                }
            })
        ]
    }
}
